import { computed, ComputedRef, Ref, ref } from "vue";
import { useImageStore } from "../store/image";
import { Image } from '../type/entity'
export function useImagePreview(imageList:Ref<Image[]>){
  const imageStore = useImageStore()
  const previewShow = computed(() => imageStore.previewShow)
  const urlList = computed(() => {
    let ret = [] as string[]
    imageList.value.forEach(val => {
      ret.push(val.url)
    })
    return ret
  })
  const initialIndex = computed(() => {
    let idList = [] as number[]
    imageList.value.forEach(val => {
      idList.push(val.id)
    })
    return idList.indexOf(imageStore.previewingImage.id)
  })
  function setPreviewShow(previewShow:boolean){
    imageStore.previewShow = previewShow
  }
  return {
    urlList,
    initialIndex,
    previewShow,
    setPreviewShow
  }
}

export function useImageList(initial: number, increment: number, origin: 'all'|'currentCategory'){

  const imageStore = useImageStore()
  const imageNumber = ref(initial)

  // 总共的图片
  const allImages:ComputedRef<Image[]> = computed(() => {
    if(origin === 'all'){
      return imageStore.images 
    }
    else if(origin === 'currentCategory'){
      return imageStore.images.filter(val => val.categoryId === parseInt(imageStore.categorySelectValue))
    }
    return [] as Image[]
  })

  // 总共的图片中要展示的图片
  const displayImages:ComputedRef<Image[]> = computed(() => {
    return allImages.value.slice(0, imageNumber.value) 
  })

  function displayMore(){
    imageNumber.value += increment
  }
  
  return {
    allImages: allImages,
    displayImages,
    displayMore,
    imageNumber
  }
}